<template>
  <div class="container">
    <div class="header">
      <div class="header-logo">
        <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
          style="width: 107px; height: 22px;">
      </div>
      <div class="header-middle">
        <span v-for="(item, index) in title" :key="index" class="header-middle-name">{{ item }}</span>
      </div>
      <div class="header-right">
        <div class="input-container" :style="{ width: inputWidth }">
          <el-input v-model="inputValue" @focus="expandInput" @blur="shrinkInput" :placeholder="placeholdertext">
            <template #suffix>
              <span style="width: 20px; height: 20px;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor"
                    d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704">
                  </path>
                </svg>
              </span>
            </template>
          </el-input>
          <div>
            <el-button type="primary">创作者中心</el-button>
          </div>
        </div>
        <div>
          <img src="./assets/会员.png" style="width: 20px;height: 20px; padding:0 10px ;">
        </div>
        <div class="text">
          <span>会员</span>
        </div>
        <div>
          <img src="./assets/通知.png" style="width: 20px;height: 20px; padding:0 10px ;">
        </div>
        <div>
          <el-avatar :size="38"
            src="https://ts4.cn.mm.bing.net/th?id=OIP-C.y7Jmuq8-ANled--c0UvORgHaHZ&w=250&h=249&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" />
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let title = ref(['首页', 'BOT', '沸点', '课程', '直播', '活动', '竞赛', '商城'])
let inputValue = ref('')
let placeholdertext = ref('探索稀土掘金')
let inputWidth = ref('200px')
const expandInput = () => {
  inputWidth.value = '300px'; // 扩展宽度
  placeholdertext.value = '搜索文章/小册/标签/用户'
}
const shrinkInput = () => {
  inputWidth.value = '200px';//缩小宽度
  placeholdertext.value = '探索稀土掘金'
}
</script>

<style lang="scss" scoped>
.container {
  .header {
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 60px;

    .header-middle {
      font-size: 16px;

      .header-middle-name {
        color: #808080;
        /* 或者其他具体的灰色值 */
        margin: 0 10px;

      }
    }

    .header-right {
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        font-size: 15px;
        color: #808080;
        /* 或者其他具体的灰色值 */
      }
    }

    .input-container {
      display: flex;
      transition: width 0.3s;
      width: 300px;
      height: 100%;
      /* 添加过渡效果 */
      overflow: hidden;
    }

    .el-input {
      width: 100%;
      /* 让输入框宽度自适应容器 */
      transition: width 0.3s;
      /* 添加过渡效果 */
    }

    .el-input__inner {
      width: 100%;
      /* 让输入框内部元素宽度自适应输入框 */
    }
  }
}
</style>